<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <attach-dialog :visible.sync="attachVisible" :project-data="attachProjectData"></attach-dialog>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="viewAttachNo"
      :tab-name="viewTabName"
      :query-id="viewQueryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { lastPickerShortcuts } from '@/common/plugins/tools/date'
import { baseTableColumns, dataAdapter } from '@/bank/views/fast/index'

import AttachDialog from '@/bank/views/fast/AttachDialog'
import ProjectViewDialog from '@/bank/views/fast/ProjectViewDialog'

const tableColumns = [...baseTableColumns]

export default {
  components: {
    AttachDialog,
    ProjectViewDialog,
  },
  props: {
    queryId: String,
    viewMode: Boolean,
  },
  data() {
    return {
      batchKey: 'customer_related_quick_batch_id',

      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'org_class.eq': '',
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'customer_related_quick',
      tableColumns: [
        ...tableColumns,
        { attrs: { label: '创建时间', prop: 'createTime', align: 'center', minWidth: '90px' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: '180px' },
          operations: [
            { name: '上传', event: this.handleUpload, ifRender: () => !this.viewMode },
            { name: '查看', event: this.handleView },
            { name: '附件', event: this.handleAttach },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 推荐时间选择
      datePicked: [],
      pickerOptions: {
        shortcuts: lastPickerShortcuts,
      },

      // 附件上传
      attachVisible: false,
      attachProjectData: {},

      viewVisible: false,
      viewQueryId: '',
      viewAttachNo: '',
      viewTabName: 'detail',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {
    queryId: {
      handler: function (val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData(index = 1) {
      if (!this.queryId) return

      this.params[`${this.batchKey}.eq`] = this.queryId
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item = dataAdapter(item)
      return item
    },

    handleDateChange() {
      const [start, end] = this.datePicked || []
      if (start && end) {
        this.params['create_time.gte'] = start
        this.params['create_time.lte'] = `${end} 23:59:59`
      } else {
        this.params['create_time.gte'] = ''
        this.params['create_time.lte'] = ''
      }
      this.getData()
    },

    handleUpload(row = {}) {
      this.attachProjectData = row
      this.attachVisible = true
    },

    handleView(row = {}) {
      this.viewQueryId = row.customer_related_id
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'detail'
      this.viewVisible = true
    },

    handleAttach(row = {}) {
      this.viewQueryId = row.customer_related_id
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'attach'
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
